<template>
  <div class="tool-text">
    <h2 class="bar-title break-words">
      <span class="text-gray-1000 font-bold text-26 leading-7 break-words w-full">
        {{$t('gpts_detail_onChatGPTsTags',{toolName: tool.name})}}
      </span>
    </h2>
    <div class="mt-7 flex items-stretch flex-wrap gap-x-5 gap-y-4">
      <div v-for="(item, key) in tool.ai_content.tags"
        :params='{handle: item }'
        :key="`tags-${key}`"
        class=" bg-gray-2600 flex-shrink-0 max-w-full px-5 py-4 rounded text-lg text-gray-1000">
        {{item}}
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'GptsToolDetailTags',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
}
</script>